import Tags from '@/components/Tags'
import { ProductList } from '@/models/types'
import React, { Component } from 'react'
import Carousel from './Carousel/index'
import { Card, WhiteSpace } from 'antd-mobile'
import { IRoute } from '@umijs/types'
import { query } from '@/servers/product'
import classnames from 'classnames'
import CardAndBuy from './CardAndBuy/index'

/**
 * ProductType
 *  imgs: []
 *  price: 0
 *  title: '' 
 *  tags: []
 * 
 * <IRoute>
 * const {id} = this.props.match.params
 * query
 * 
 * render
 * <Carousel data={imgs}>
 * <Card>
 * $price 
 * title
 * tags
 */

export default class Product extends Component<IRoute> {
  state: ProductList = {
    imgs: [],
    price: 0,
    title: '',
    tags: []
  }

  componentDidMount() {
    const { id } = this.props.match.params
    query({ id }).then(data => {
      this.setState(data.data)
    })
  }

  render() {
    const { imgs, price, title, tags } = this.state
    // classname 组合多个样式
    return (
      <div>
        <Carousel data={imgs}></Carousel>
        <WhiteSpace size='lg'></WhiteSpace>
        <Card>
          <p className={classnames('red', 'bold')}>${price}</p>
          {/* basicLayout.less里的全局样式 */}
          <p className='font14'>{title}</p>
          <WhiteSpace size='lg'></WhiteSpace>
          <Tags tags={tags}></Tags>
        </Card>
        <CardAndBuy product={this.state}></CardAndBuy>
      </div>
    )
  }
}

